<template>
  <el-row :gutter="20"
    class="content ">
    <el-col :span="4"
      class="left">
      <div class="p-d b-f left-tree">
        <el-input placeholder="输入关键字进行过滤"
          v-model="filterText">
        </el-input>
        <el-tree class=" pa-data-collect-tree"
          default-expand-all
          :expand-on-click-node="false"
          :data="treeData"
          :highlight-current="true"
          :props="defaultProps"
          @node-click="handleNodeClick"
          node-key="id"
          :default-checked-keys="[guideId]"
          :render-content="renderContent"
          :filter-node-method="filterNode"
          ref="treeDataRef">
        </el-tree>
      </div>
    </el-col>
    <el-col :span="20"
      class="right  ">
      <div class="p-d b-f">
        <div class="">
          <SearchComp :searchForm="searchForm"
            :searchData="queryString"
            :searchAction="searchAction"></SearchComp>
        </div>
        <div class="">
          <TableCompEle class="m-t"
            ref="multipleTable"
            :tableData="tableData"
            :tableConfig="tableConfig"
            :tableAction="tableAction"
            :isSelect="false"
            :isIndex="true"
            :isShowPage="true"
            @getPagination="getPageList"
            :queryParams="queryParams"></TableCompEle>
        </div>
      </div>
    </el-col>
    <Review ref="reviewRef"
      @close="getPageList()" />
  </el-row>
</template>

<script>
import { getTreeList } from '@/api/guide.js'
import { getList } from '@/api/projectDeclare.js'
import Review from './review.vue'
export default {
  components: { Review },
  props: {
    activeProject: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      filterText: '',
      guideId: null,
      isItem: false,
      defaultProps: {
        children: 'items',
        label: 'name'
      },
      treeData: [],
      queryParams: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      tableData: [],
      tableConfig: [
        {
          prop: 'domainName',
          label: '申报领域'
        },
        {
          prop: 'guideName',
          label: '指南条目'
        },
        {
          prop: 'name',
          label: '项目名称'
        },
        {
          prop: 'departmentName',
          label: '申报单位'
        },
        {
          prop: 'projectHeader',
          label: '项目负责人'
        },
        {
          prop: 'researchFund',
          label: '项目经费'
        },
        {
          prop: 'reviewResults',
          label: '评审结果'
        }
      ],
      tableAction: {
        align: () => 'center',
        width: () => String(180),
        operations: [
          {
            label: '录入评审结果',
            isLink: true,
            type: 'primary',
            method: row => {
              let obj = {
                title: '录入评审结果',
                data: row
              }
              this.$refs.reviewRef.show(obj)
            }
          },
          {
            label: '详情',
            isLink: true,
            type: 'primary',
            method: row => {
              this.$router.push({
                name: 'ProjectDeclareAdd',
                params: { flag: 'look', id: row.id, isResult: true }
              })
            }
          }
        ]
      },
      queryString: {
        name: '',
        projectHeader: ''
      },
      searchForm: {
        changeMethod: () => {
          this.queryParams.currentPage = 1
          this.getPageList()
        },
        formData: [
          {
            type: 'Input',
            label: '项目名称',
            prop: 'name',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入指南名称'
          },
          {
            type: 'Input',
            label: '项目负责人',
            prop: 'projectHeader',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入项目负责人'
          }
        ]
      },
      searchAction: [
        {
          label: '查询',
          type: 'primary',
          handle: () => {
            this.queryParams.currentPage = 1
            this.$refs.multipleTable.clearSelection()
            this.getPageList()
          }
        },
        {
          label: '重置',
          type: 'primary',
          plain: true,
          handle: () => {
            this.queryString = {
              name: '',
              projectHeader: ''
            }
            this.queryParams.currentPage = 1
            this.getPageList()
          }
        }
      ]
    }
  },
  watch: {
    filterText(val) {
      this.$refs.treeDataRef.filter(val)
    }
  },
  created() {
    this.initTree()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    handleNodeClick(data) {
      console.log(data)
      this.guideId = data.id
      this.isItem = data?.isItem ?? false
      this.getPageList()
    },
    initTree() {
      getTreeList().then(res => {
        this.treeData = res?.data ?? []
        this.guideId = res?.data[0]?.id ?? null
        this.$nextTick(function () {
          this.$refs.treeDataRef.setCurrentKey(this.guideId)
          this.getPageList()
        })
      })
    },
    getPageList() {
      if (this.isItem) {
        this.queryString.guideItemId = this.guideId
        this.queryString.guideId = null
      } else {
        this.queryString.guideId = this.guideId
        this.queryString.guideItemId = null
      }
      getList(
        Object.assign(
          {
            currentPage: this.queryParams.currentPage,
            pageSize: this.queryParams.pageSize
          },
          this.queryString
        )
      ).then(res => {
        this.queryParams.total = res?.data?.total ?? 0
        this.tableData = res.data?.list ?? []
      })
    },
    renderContent(h, { data }) {
      return (
        <span class="pa-tree-node">
          <span title={data.name}>{data.name}</span>
        </span>
      )
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  height: 73vh;
  display: flex;
  > div {
    height: 100%;
    .b-f {
      height: 100%;
    }
  }
}
.left-tree {
  overflow: auto;
  &::-webkit-scrollbar {
    width: 0px;
    background-color: #f1f1f1;
    border-radius: 5px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 5px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }
  .el-tree {
    padding-top: 10px;
    ::v-deep .pa-tree-node {
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    ::v-deep .el-tree-node {
      margin-left: -10px;
    }
    ::v-deep .el-tree-node__content {
      height: 40px;
    }
    ::v-deep .el-tree-node__content:hover {
      background: rgba(64, 158, 255, 0.1);
    }
  }
}
</style>